<!--Copyright (c) 2012 Ryan Stemen

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.-->

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Prototype 001 - Getting Started</title>
    <script type="text/javascript"><!--
        const WIDTH = 1280;
        const HEIGHT = 720;
        
        var center = new vec2(WIDTH / 2, HEIGHT / 2);
        var context;
        var canvas;
        var bullets = new Array();
        var counter = 0.0;

        window.addEventListener('load', init, false);
        
        function vec2(x, y)
        {
            this.x = x;
            this.y = y;
        }
        
        function Bullet(x, y, velocity)
        {
            ///////////////////////
            // constructor block //
            ///////////////////////
            this.x = x;
            this.y = y;
            this.radius = 5;
            this.velocity = velocity;
            
            /////////////////////
            // functions block //
            /////////////////////
            this.isOffScreen = function()
            {
                // if any of these conditionals are true then the bullet can't be seen.
                return (this.x + this.radius < 0)
                   || (this.x - this.radius > WIDTH)
                   || (this.y + this.radius < 0)
                   || (this.y - this.radiues > HEIGHT);
            }
            
            this.update = function()
            {
                //move the bullet by adding its velocity to its position.
                this.x += this.velocity.x;
                this.y += this.velocity.y;
            }
            
            this.draw = function()
            {
                //beginPath() is used to START a line drawing.
                context.beginPath();
                
                //arc() lets you draw an arc by specifying a center, start angle and end angle.
                context.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
                
                //stroke() commits the drawing
                context.stroke();
            }
        }
        
        function init(){            
            canvas = document.getElementById('c');
            context = canvas.getContext('2d');
            
            runLoop();
        }
        
        function runLoop(){
            //remove everything that we drew out previous frame from the screen
            context.clearRect(0, 0, WIDTH, HEIGHT);
            
            //create a new bullet each frame
            var bullet = new Bullet(center.x, center.y, new vec2(3 * Math.sin(counter), 3 * Math.cos(counter)));            
            bullets.push(bullet);
            
            //iterate throught all of the bullets to update and draw them
            for(var i = 0; i < bullets.length; i++)
            {
                //get the next bullet from our array
                var b = bullets[i];
                
                //let the bullet update itself
                b.update();
                
                //remove bullets that are off screen
                if(b.isOffScreen())
                    bullets.splice(i, 1);
                
                //let the bullet draw itself
                b.draw();
            }
            
            // increment the counter and call the runLoop function after a 14 ms delay
            counter += 0.1;
            window.setTimeout(runLoop, 14);
        }
        
        
    </script>
</head>
<body>
    <canvas id="c" width="1280px" height="720px">Canvas not supported!</canvas>
</body>
</html>
